<template>
    <div class="main">
        <div class="content">
            <input type="text" placeholder="搜索商品" ref="searchWord" />
            <span
                class="iconfont icon-fangdajing"
                @click="search(this.$refs.searchWord.value)"
            ></span>
        </div>
        <div class="hotword">
            <a
                v-for="(item, key) in hotwords"
                :key="key"
                :class="item.active === ture ? 'active' : ' '"
                @click="search(item.word)"
                href="#"
                >{{ item.word }}</a
            >
        </div>
    </div>
</template>

<script setup>
// 简单实现热词
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const hotwords = ref([
    { "word": "手机", "active": true },
    { "word": "电脑", "active": false },
    { "word": "果酒", "active": false },
])

const search = (keyword) => {
    router.push("/goods_list/" + keyword + "/1/1");
    hotwords.value.forEach((d) => {
        if (d.word == keyword) {
            d.active = true;
        } else {
            d.active = false;
        }
    })
}
</script>

<style lang="less" scoped>
@green: #55fc2f;
.main {
    height: 100%;
    margin-top: 45px;
    .content {
        width: 550px;
        height: 35px;
        border: 2px solid @green;
        margin-left: 80px;
        input {
            width: 485px;
            line-height: 35px;
            height: 35px;
            padding-left: 15px;
        }
        span {
            display: inline-block;
            background-color: @green;
            width: 50px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: white;
            font-weight: 700px;
            &:hover {
                cursor: pointer;
                background-color: aqua;
            }
        }
        .hotword {
            margin-left: 80px;
            margin-top: 5px;
            a {
                color: #cccccc;
                margin-right: 10px;
                &:hover {
                    color: @green;
                }
            }
            .active {
                color: red;
            }
        }
    }
}
</style>